<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/font-awesome-4.7.0/css/font-awesome.min.css"
          media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
            <div class="layui-card-body layui-text">
                <c:forEach var="notice" items="${noticeList}">
                    <div class="layuimini-notice">
                        <div class="layuimini-notice-title">${notice.topic}</div>
                        <div class="layuimini-notice-extra"><fmt:formatDate value="${notice.createDate}"
                                                                            pattern="yyyy-MM-dd HH:mm:ss"/></div>
                        <div class="layuimini-notice-content layui-hide">
                                ${notice.content}
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>个人借书情况</div>
            <div class="layui-card-body layui-text">
                <div id="main2" style="width: 100%; height:210px"></div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4" style="margin-left: 10px">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>图书借阅情况</div>
            <div class="layui-card-body layui-text">
                <div id="main" style="width: 100%;min-height:500px"></div>
            </div>
        </div>
    </div>
    <div style="float: left; width: 31%; margin-left: 10px; position: relative; display: block; box-sizing: border-box">
        <div class="layui-card">
            <div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>图书借阅时间线</div>
            <div class="layui-card-body layui-text">
                <div id="main" style="width: 100%; height:500px; overflow: scroll">
                    <ul class="layui-timeline">
                        <c:forEach var="lend" items="${info}" varStatus="status">
                            <li class="layui-timeline-item">
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">
                                        <fmt:formatDate value="${lend.lendDate}" pattern="yyyy年MM月dd日HH点mm分ss秒"/> <br/>
                                        <span style="color: red"> ${lend.readerInfo.realName}</span> 借走 <span
                                            style="color: crimson"><<${lend.bookInfo.name}>></span><br/>
                                        <c:if test="${lend.backDate == null}">
                                            未归还
                                        </c:if>
                                        <c:if test="${lend.backDate != null}">
                                            <fmt:formatDate value="${lend.backDate}" pattern="yyyy年MM月dd日HH点mm分ss秒"/> <span
                                                style="color: green">归还</span>
                                        </c:if>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'miniTab', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;

        miniTab.listen();

        layui.use(['echarts'], function () {
            var echarts = layui.echarts,
                $ = layui.jquery;
            console.log(echarts);
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var myChart2 = echarts.init(document.getElementById('main2'));

            // 指定图表的配置项和数据
            option = {
                xAxis: {
                    type: 'category',
                    data: [
                        <c:forEach items="${lendBooks}" var="lender" >
                            '${lender.readerName}', <!-- 注意这里加上单引号，确保生成的是字符串 -->
                        </c:forEach>
                    ]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [
                            <c:forEach items="${lendBooks}" var="lender">
                                ${lender.number},
                            </c:forEach>
                        ],
                        type: 'bar'
                    }
                ]
            };

            // 指定图表的配置项和数据
            option2 = {
                title: {
                    text: '图书借阅类型分布图',
                    // subtext: '借阅饼图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '图书借阅',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            <c:forEach items="${list}" var="type">
                            {value:${type.counts}, name: '${type.name}'},
                            </c:forEach>
                        ],
                        roseType: 'angle',
                        emphasis: {
                            itemStyle: {
                                normal: {
                                    shadowBlur: 200,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表
            myChart.setOption(option2);
            myChart2.setOption(option);
        });

        /**
         * 查看公告信息
         **/
        $('body').on('click', '.layuimini-notice', function () {
            var title = $(this).children('.layuimini-notice-title').text(),
                noticeTime = $(this).children('.layuimini-notice-extra').text(),
                content = $(this).children('.layuimini-notice-content').html();
            var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
                '<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
                '<div style="font-size: 12px">' + content + '</div>\n' +
                '</div>\n';
            parent.layer.open({
                type: 1,
                title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
                area: '300px;',
                shade: 0.8,
                id: 'layuimini-notice',
                btnAlign: 'c',
                moveType: 1,
                content: html
            });
        });
    });
</script>
</body>
</html>

<style>
    .layui-card {
        border: 1px solid #f2f2f2;
        border-radius: 5px;
    }

    .icon {
        margin-right: 10px;
        color: #1aa094;
    }

    .icon-cray {
        color: #ffb800 !important;
    }

    .icon-blue {
        color: #1e9fff !important;
    }

    .icon-tip {
        color: #ff5722 !important;
    }

    .layuimini-qiuck-module {
        text-align: center;
        margin-top: 10px
    }

    .layuimini-qiuck-module a i {
        display: inline-block;
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: 2px;
        font-size: 30px;
        background-color: #F8F8F8;
        color: #333;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .layuimini-qiuck-module a cite {
        position: relative;
        top: 2px;
        display: block;
        color: #666;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }

    .welcome-module {
        width: 100%;
        height: 210px;
    }

    .panel {
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
    }

    .panel-body {
        padding: 10px
    }

    .panel-title {
        margin-top: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: inherit
    }

    .label {
        display: inline;
        padding: .2em .6em .3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .25em;
        margin-top: .3em;
    }

    .layui-red {
        color: red
    }

    .main_btn > p {
        height: 40px;
    }

    .layui-bg-number {
        background-color: #F8F8F8;
    }

    .layuimini-notice:hover {
        background: #f6f6f6;
    }

    .layuimini-notice {
        padding: 7px 16px;
        clear: both;
        font-size: 12px !important;
        cursor: pointer;
        position: relative;
        transition: background 0.2s ease-in-out;
    }

    .layuimini-notice-title, .layuimini-notice-label {
        padding-right: 70px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .layuimini-notice-title {
        line-height: 28px;
        font-size: 14px;
    }

    .layuimini-notice-extra {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 16px;
        display: inline-block;
        height: 16px;
        color: #999;
    }
</style>